<script lang="ts" setup>
import { ref, h, reactive, onMounted,onBeforeMount } from "vue";
import { ReVxeGrid } from "@/components/ReVxeTable";
import { VxeGridPropTypes, VxeUI } from "vxe-table";
import { VxeFormProps, VxeButton,VxeCheckbox,VxeImage } from "vxe-pc-ui";
import { ElMessage } from "element-plus";
import { bankAccountList } from "@/api/contract/contract";
import {
  MerchantsInfoByTaxSourcesId,
} from "@/api/welcome";
const reVxeGridRef = ref();
let taxSourcesId = Number(sessionStorage.getItem("taxSourcesId"))
onMounted(() => {
  // getMerchantsInfoByTaxSourcesId( taxSourcesId )
});
const columns: VxeGridPropTypes.Columns<any> = [  
  {
    title: "业务公司",
    field: "taxSourcesIdDisplay",
    align: "center",
    minWidth: 100,    
  },
  {
    title: "支付渠道",
    field: "bankAccountTypeDisplay",
    align: "center",
    minWidth: 100,
    showOverflow: true
  },  
  {
    title: "支付合同",
    field: "contractUrl",
    align: "center",
    minWidth: 100,
    slots: {
      default: ({ row }) => {
        let list = [h(VxeButton, {
              status: "primary",
              mode: "text",
              size: "mini",
              content: "查看",
              onClick() {
                if(!row.contractUrl){
                  ElMessage.error("查看地址不存在！");
                  return false;
                }
                window.open(row.contractUrl, "_blank");
              }
            })]
            return list;
      }
    }
  }
   
];
// 筛选相关
const formRef = ref();
interface FormDataVO {
  merchantsName: string;//姓名
  taxSourcesId: number | string; // 税源地 
}
const formOptions = reactive<VxeFormProps<FormDataVO>>({
  data: {
    merchantsName: '',
    taxSourcesId: taxSourcesId,    
  },
  items: [
    {
      field: "merchantsName",
      title: "",
      span: 4,
      itemRender: {},
      slots: { default: "merchantsName" }
    },    
    { align: "left", span: 4, slots: { default: "active" } }
  ]
});

const handleReset = async () => {
  await handleInitialFormParams();
  reVxeGridRef.value.loadData("reset");
};

const handleView = (record: Recordable) => {
  
};
const functions: Record<string, string> = {
  add: "platform.client.index.add",
  edit: "platform.client.index.edit",
  view: "platform.client.index.view",
  delete: "platform.client.index.delete"
};


</script>
<template>
  <div>   
    <el-card :shadow="`never`" class="table-card">
      <ReVxeGrid
        ref="reVxeGridRef"
        :request="bankAccountList"
        :functions="functions"
        :searchParams="formOptions.data"
        :columns="columns"
        :action="false"
        @handleView="handleView"
      />
    </el-card>
  </div>
</template>
<style>
</style>
